<template>

	<!-- #ifdef MP-ALIPAY -->
	<view class="sun-tab-box" :style="{position:scrollTop>toHeight? 'fixed':'relative',
		top:scrollTop>toHeight?customBar+164 + 'rpx':''}">
		<!-- #endif -->


		<!-- #ifdef APP-PLUS || H5 -->
		<view class="sun-tab-box">
			<!-- #endif -->



			<view class="sun-tab-box-item" v-for="(item,index) in list" :key="item.id"
				@click="selectActive(index,item.id)">
				<view class="sun-tab-box-item-title" :class="{'sun-tab-box-item-title-active':current == index}">
					{{item.name}}
				</view>
				<view class="sun-tab-box-item-small"
					:style="{  background:current == index ?'linear-gradient(105deg, #FF8679 -14%, #FB4A43 100%)':'none',color:current == index ?'#fff':'#999999'}">
					{{item.description}}
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		props: {
			scrollTop: {

				type: Number,
				default: 0
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				current: 0,
				customBar: 0,
				hight: 0,
				// toHeight:0,

			}
		},
		onLoad() {


		},
		mounted() {

			uni.getSystemInfo({
				success: (e) => {


					// #ifdef MP-ALIPAY
					this.statusBar = e.statusBarHeight
					this.customBar = e.statusBarHeight + e.titleBarHeight

					// #endif


					// #ifdef APP-PLUS

					this.customBar = e.statusBarHeight * 2

					// console.log(this.customBar);
					// #endif


				}
			})
			// #ifdef MP-ALIPAY
			uni.createSelectorQuery().select('.sun-tab-box')
				.boundingClientRect((data) => {
					let pageScrollTop = Math.round(data.top)

					// console.log(pageScrollTop);
					this.hight = pageScrollTop
				})
				.exec()

			// #endif

		},
		watch: {
			scrollTop: {
				handler() {
					// console.log(this.scrollTop);
					// console.log(this.toHeight);
					// console.log(this.hight);
					// console.log((110 + this.customBar));
				}
			}
		},
		computed: {
			subHeight() {
				// #ifdef APP-PLUS  || H5
				//  px  单位
				return this.hight - (110 + this.customBar)
				// #endif

				// #ifdef MP-ALIPAY
				//  px  单位
				return this.hight - 126
				// #endif

			},
			toHeight() {

				// #ifdef APP-PLUS || H5
				return this.hight - (110 + this.customBar)
				// #endif

				// #ifdef MP-ALIPAY
				//  px  单位
				return this.hight - (parseFloat(this.customBar) + parseFloat(this.statusBar))
				// #endif

			}

		},
		methods: {


			selectActive(e, id) {
				this.current = e
				uni.pageScrollTo({
					scrollTop: this.subHeight, //滚动的距离
					duration: 200, //过渡时间
				})
				// this.getCategory(id)
				this.$emit('sendCategory', id)
			},
			getCategory(id) {
				// this.$http('goods.lists', {
				// 	category_id:id,
				// 	keywords:'',
				// 	page:1
				// }).then(res => {
				// 	if (res.code === 1) {
				// 		console.log(res);
				// 	}
				// });
			},

		}
	}
</script>

<style scoped lang="scss">
	.sun-tab-box {
		width: 100%;
		height: 112rpx;
		background-color: #ffffff;
		z-index: 999;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.sun-tab-box-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.sun-tab-box-item-title {
				font-size: 32rpx;
				color: #3D3D3D;
			}

			.sun-tab-box-item-title-active {
				color: #FF4747;
				font-weight: 900;
			}

			.sun-tab-box-item-small {
				margin-top: 4rpx;
				font-size: 20rpx;
				// width: 100rpx;
				color: #fff;
				font-weight: 300;
				padding: 4rpx 12rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;

			}
		}
	}
</style>
